<template>
	<NavBar icon="left" title="我的积分" /> 
	<view class="contain">
		<view class="bg-white header pt-2">
		<view class="text-[#ff6666] ml-2">
			提示：历史消费满100元可兑换100积分
		</view> 
				<view class="flex-col text-center flex-1">
					<text>{{info.integral}}</text>
					<view>当前可用积分</view>
				</view> 
		</view>
		<view class="body bg-white rounded-2xl m-3 mt-[-4px] p-2 ">
			<view class="title   text-center ">
				积分记录  
			</view>

			<view class="list">
				<view class="itemm-2 p-2 items-center" v-for="i in info.myIntegralVo1">
					<view class=" flex justify-between w-full">
						<view  >{{i.time}}</view>
						<text class="text-[#d2d2d2] " style="font-size: 12px;">
							<text class="pr-2">获取({{i.add}})</text>
							<text>使用(-{{i.use}})</text>
						</text>
					</view >
					<view class=" flex border-b-2 p-2" v-for="el in  i.list">
						<view class="flex-col  flex-1">
							<view class="text-gray-500">
								<view style="font-size: 14px">
									{{el.integralType}}（订单编号：{{el.orderId}}）
								</view>
									<view  style="font-size: 12px">
									{{dayjs(i.createTime).format('YYYY/MM/DD HH:mm:ss')}}
								</view>
							</view> 
						</view>
						<view class="text-[#fc6768]">
						<text v-if="el.changeType === '减少'">-{{el.integral}}</text>
						<text v-if="el.changeType === '增加'">+{{el.integral}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import * as api from '@/api/modules/my_points.js'
	import useStore from '@/store/index.js'
	import dayjs from 'dayjs'
	const info = ref({})
	const getData =async () =>{
		if(!useStore().user.userInfo.userId){
			return uni.showToast({
			title:'当前状态异常，刷新页面重新加载'
		})
		}
		const {data} = await api.my_pointsAPI(10086)
		// const {data} = await api.my_pointsAPI(useStore().user.userInfo.userId)
		 info.value = data
	}
	
	getData()
 
</script>

<style lang="scss">
	.contain {
		height: calc(100vh - 44px);
		background: #f2f2f2;
		border-top: 1px solid #ccc;

		.header {
			height: 18%;
			background: linear-gradient(to bottom, #2274e3, #f2f2f2);

			.flex-col {
				font-weight: 700;

				view {
					font-size: 12px;
					color: #4678f8;
				}

				text {
					color: #fc6768;
				}
			}
		}

		.body {
			height: calc(100vh - 44px - 24%);
			overflow: hidden;

			.title {
				color: #2a79e3;

				.num {
					color: #ff6666;
				}
			}

			.list {
				height: 100%;
				overflow-y: auto;

				.item {
					font-size: 12px;
					border-top: 1px solid #ebebeb;

					.text {
						color: #ff6666;
						font-size: 16px;
					}
				}
			}
		}
	}
</style>